<template>
  <div v-if="active !== -1" class="page-footer-container">
    <transition name="room">
      <footer v-if="visible" class="page-footer">
        <router-link :to="$link({name: 'index'})">
          <div class="item center-flex">
            <img v-if="active === 0" class="tab-icon" src="./images/home_tabbar_icon_home@2x.png">
            <img v-else class="tab-icon" src="./images/home_tabbar_icon_home_selected@2x.png">
            <span :class="{active: active === 0}">人人宴</span>
          </div>
        </router-link>
        <router-link :to="$link({name: 'youxuan'})">
          <div class="item center-flex">
            <img v-if="active === 1" class="tab-icon" src="./images/home_tabbar_icon_optimization_selected@2x.png">
            <img v-else class="tab-icon" src="./images/home_tabbar_icon_optimization@2x.png">
            <span :class="{active: active === 1}">优选</span>
          </div>
        </router-link>
        <router-link :to="$link({name: 'temai'})">
          <div class="item center-flex">
            <img v-if="active === 2" class="tab-icon" src="./images/home_tabbar_icon_sale_selected@2x.png">
            <img v-else class="tab-icon" src="./images/home_tabbar_icon_sale@2x.png">
            <span :class="{active: active === 2}">特卖</span>
          </div>
        </router-link>
        <router-link :to="{name: 'user'}">
          <div class="item center-flex">
            <img v-if="active === 3" class="tab-icon" src="./images/home_tabbar_icon_mine_selected@2x.png">
            <img v-else class="tab-icon" src="./images/home_tabbar_icon_mine@2x.png">
            <span :class="{active: active === 3}">我的</span>
          </div>
        </router-link>
      </footer>
    </transition>
  </div>
</template>

<script>
// 节流函数
let startTime = new Date()
function throttle(fn, time = 300) {
  if (typeof fn !== 'function') {
    throw new Error('必须传入一个函数作为参数')
  }
  const currentTime = new Date()
  if (currentTime - startTime > time) {
    startTime = currentTime
    fn()
  }
}

export default {
  data() {
    return {
      visible: true,
      ticking: false,
      oldScrollTop: 0
    }
  },
  computed: {
    active() {
      const { name } = this.$route
      const mirror = {
        'sh': 0,
        'sz': 0,
        'index': 0,
        'youxuan': 1,
        'sz-youxuan': 1,
        'sz-youxuan': 1,
        'temai': 2,
        'sz-temai': 2,
        'sh-temai': 2,
        'user': 3
      }
      return mirror[name] !== undefined ? mirror[name] : -1
    }
  },
  methods: {
    init() {
      throttle(() => {
        const height = this.$el.clientHeight || 40
        const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
        if (scrollTop < height) {
          this.visible = true
          return
        }
        const clienHeight = document.body.clientHeight - document.documentElement.clientHeight
        this.visible = (this.oldScrollTop > scrollTop) || scrollTop + 200 > clienHeight

        this.oldScrollTop = scrollTop
      }, 16.7)
    }
  },
  mounted() {
    this.init()
    window.addEventListener('scroll', this.init)
  },
  beforeDestroy() {
    if (typeof window === 'undefined') return
    window.removeEventListener('scroll', this.init)
  }
}
</script>

<style lang="scss" scoped>
.page-footer-container {
  height: 0.96rem;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  z-index: 1;
  font-size: 0.2rem;
}
.page-footer {
  height: 100%;
  background: white;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item {
  flex-direction: column;
  span {
    color: #68676c;
  }
  .active {
    color: #ff1d41;
  }
}
.tab-icon {
  width: 0.44rem;
  font-size: 0.2rem;
  padding-bottom: 0.08rem;
}

.room-enter-active,
.room-leave {
  opacity: 1;
  transform: translate3D(0, 0, 0);
  transition: opacity 0.3s, transform 0.3s linear;
}

.room-enter,
.room-leave-to {
  opacity: 0.5;
  transform: translate3D(0, 150%, 0);
  transition: opacity 0.3s, transform 0.3s linear;
}
</style>
